<template>
  <div class="upload-control">
    <div class="upload-list">
      <div
        class="upload-list-item"
        :class="fileList.length && !single ? 'margin-bottom' : ''"
      >
        <div class="file-item" v-for="(item, index) in fileList" :key="index">
          <svg
            class="file-icon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21 23.55H6.59995C5.52299 23.55 4.64995 22.677 4.64995 21.6V2.4C4.64995 1.32304 5.523 0.45 6.59995 0.45H16.2C16.2727 0.45 16.3425 0.478896 16.3939 0.53033L22.8696 7.00607C22.9211 7.0575 22.95 7.12726 22.95 7.2V21.6C22.95 22.677 22.0769 23.55 21 23.55Z"
              fill="white"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <path
              d="M16.2 0.300049V4.80005C16.2 6.12553 17.2745 7.20005 18.6 7.20005H23.1"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <rect
              x="0.600098"
              y="10.9"
              width="15.6"
              height="9.4"
              rx="1.2"
              fill="#D92D20"
            />
            <path
              d="M2.89928 18.1V13.7363H4.62087C4.95184 13.7363 5.2338 13.7995 5.46675 13.926C5.69971 14.051 5.87726 14.225 5.99942 14.448C6.123 14.6696 6.18479 14.9253 6.18479 15.215C6.18479 15.5048 6.12229 15.7605 5.99729 15.9821C5.87229 16.2037 5.69118 16.3763 5.45397 16.4998C5.21817 16.6234 4.93266 16.6852 4.59743 16.6852H3.50013V15.9459H4.44829C4.62584 15.9459 4.77215 15.9153 4.88721 15.8542C5.00368 15.7917 5.09033 15.7058 5.14715 15.5964C5.20539 15.4856 5.23451 15.3585 5.23451 15.215C5.23451 15.0701 5.20539 14.9437 5.14715 14.8358C5.09033 14.7264 5.00368 14.6419 4.88721 14.5822C4.77073 14.5211 4.623 14.4906 4.44403 14.4906H3.82187V18.1H2.89928ZM8.33092 18.1H6.78405V13.7363H8.34371C8.78263 13.7363 9.16047 13.8237 9.47723 13.9984C9.79399 14.1717 10.0376 14.421 10.2081 14.7463C10.3799 15.0716 10.4659 15.4608 10.4659 15.9139C10.4659 16.3684 10.3799 16.7591 10.2081 17.0858C10.0376 17.4125 9.79257 17.6632 9.47297 17.8379C9.15479 18.0126 8.7741 18.1 8.33092 18.1ZM7.70663 17.3095H8.29257C8.5653 17.3095 8.7947 17.2612 8.98078 17.1646C9.16828 17.0666 9.3089 16.9153 9.40265 16.7108C9.49782 16.5048 9.54541 16.2392 9.54541 15.9139C9.54541 15.5915 9.49782 15.328 9.40265 15.1234C9.3089 14.9189 9.16899 14.7683 8.98291 14.6717C8.79683 14.5751 8.56743 14.5268 8.2947 14.5268H7.70663V17.3095ZM11.1493 18.1V13.7363H14.0385V14.497H12.0719V15.5368H13.8467V16.2974H12.0719V18.1H11.1493Z"
              fill="white"
            />
          </svg>
          <span>{{ item.name }}</span>
          <IconClose @click="removeItem(index)" class="close-icon"></IconClose>
        </div>
      </div>
      <div class="upload-btn" v-if="isUploadMore" @click="selectFile">
        <svg
          class="plus-icon"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M8 24.0004H40" stroke="#CCD6DE" stroke-width="3" />
          <path d="M24 8.00037L24 40.0004" stroke="#CCD6DE" stroke-width="3" />
        </svg>
        <span>{{ $t("btnText.upload_file") }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, ref } from "vue";
import { message } from "ant-design-vue";
const props = defineProps<{
  single: boolean;
}>();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const fileList = ref<{ name: string }[]>([]);
const emits = defineEmits(["selectFile", "removeFile"]);
const selectFile = () => {
  let input = document.createElement("input");
  input.type = "file";
  input.accept = "application/pdf";
  input.click();
  input.onchange = (e) => {
    let file = e.target!.files[0];
    if (file.type !== "application/pdf") {
      return message.warning($t("message.upload_file.error_1"));
    }
    let obj = {
      name: file.name,
    };
    fileList.value.push(obj);
    emits("selectFile", file);
  };
};

const removeItem = (index: number) => {
  fileList.value.splice(index, 1);
  emits("removeFile", index);
};

const isUploadMore = computed(() => {
  if (props.single) {
    return fileList.value.length < 1;
  } else {
    return true;
  }
});

const clearFile = () => {
  fileList.value = [];
}

defineExpose({
  clearFile
})

</script>
<style scoped lang="less">
.upload-list {
  display: flex;
  flex-direction: column;
  & > .upload-btn {
    width: 120px;
    height: 160px;
    border: 1px solid #ccd6de;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  .upload-list-item {
    &.margin-bottom {
      margin-bottom: 17px;
    }
  }
  .file-item {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: #36434d;
    width: 100%;
    &:hover {
      .close-icon {
        visibility: visible;
      }
    }
    .file-icon {
      width: 24px;
      height: 24px;
    }
    .close-icon {
      visibility: hidden;
      cursor: pointer;
    }
  }
  .upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    gap: 8px;
    font-size: 14px;
    color: #ccd6de;
    svg.plus-icon {
      width: 48px;
      height: 48px;
    }
  }
}

@media screen and (max-width: 768px) {
  .upload-list {
    & > .upload-btn {
      height: 850px;
      width: 850px;
      border-radius: 51px;
    }
    .upload-list-item {
      &.margin-bottom {
        margin-bottom: 61px;
      }
    }
    .file-item {
      gap: 61px;
      font-size: 72px;
      svg.file-icon {
        width: 123px;
        height: 123px;
      }
    }
    .upload-btn {
      gap: 41px;
      font-size: 72px;
      svg.plus-icon {
        width: 246px;
        height: 246px;
      }
    }
  }
}
</style>
